<template>
    <el-container>
        <el-header>
            <el-col class="headname" >商品标签</el-col>
            <el-col class="btn">
                <el-button type="primary" plain @click="dialogFormVisible = true" >添加标签</el-button>
            </el-col>
        </el-header>
        <el-main>
            <el-table class="tablemenu"
                      :data="tableData"
                      stripe
                      style="width: 100%">


                <el-table-column
                        prop="tagId"
                        label="ID" width="60">
                </el-table-column>

                <el-table-column
                        prop="tagName"
                        label="名称">
                </el-table-column>


                <el-table-column
                        prop="tagDescribe"
                        label="简介">
                </el-table-column>

                <el-table-column   label="启用">
                    <templete  slot-scope="scope">
                        <el-switch
                                v-model="scope.row.tagStart"
                                active-value="1"
                                inactive-value="0"
                                active-color="#13ce66"
                                inactive-color="#ff4949"

                        >
                        </el-switch>
                    </templete>
                </el-table-column>



                <el-table-column prop="caozuo" label="操作">
                    <template slot-scope="scope">
                        <el-button   type="danger" icon="el-icon-delete" class="btn" circle  @click="del(scope.row.tagId)"></el-button>
                        <el-button   type="primary" icon="el-icon-edit" class="btn" circle @click="mix(scope.row.tagId)"></el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-main>


<!--        (form.tagId)-->
<!--        dialogFormVisible2=true-->


        <!-- Form -->
        <el-dialog title="添加标签" :visible.sync="dialogFormVisible">
            <el-form :model="form" label-width="200" class="frommenu">


                <el-form-item label="名称" prop="name" label-width="100">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>



                <el-form-item label="简介" prop="jianjie" >
                    <el-input type="textarea" v-model="form.desc" rows="4" ></el-input>
                </el-form-item>


                <el-form-item label="是否启用" prop="type" class="radioleft">
                    <template>
                        <el-radio-group v-model="form.radio">
                            <el-radio  :label="1">是</el-radio>
                            <el-radio  :label="0" >否</el-radio>
                        </el-radio-group>
                    </template>
                </el-form-item>



            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addSure" >确 定</el-button>
            </div>
        </el-dialog>


        <!-- Form -->
        <el-dialog title="修改标签" :visible.sync="dialogFormVisible2">
            <el-form :model="form" label-width="200" class="frommenu">


                <el-form-item label="名称" prop="name" label-width="100">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>



                <el-form-item label="简介" prop="jianjie" >
                    <el-input type="textarea" v-model="form.desc" rows="4" ></el-input>
                </el-form-item>


                <el-form-item label="是否启用" prop="type" class="radioleft">
                    <template>
                        <el-radio-group v-model="form.radio">
                            <el-radio  :label="1" >是</el-radio>
                            <el-radio  :label="0" >否</el-radio>
                        </el-radio-group>
                    </template>
                </el-form-item>



            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible2 = false">取 消</el-button>
                <el-button type="primary" @click="mixSure">确 定</el-button>
            </div>
        </el-dialog>


    </el-container>

</template>

<script>
    import qs from 'qs'
    export default {
        methods: {
            // 状态
            // zhuang(data){
                // console.log(data)
                // data.tagStart=="1" ? data.tagStart="0":data.tagStart="1"
            // },



              //添加
            addSure(){
                // console.log(this.form.name)
                // console.log(this.form.desc)
                // console.log(this.form.radio)

                this.dialogFormVisible = false;
                this.$axios.post('/api/tag/add',{
                        tagName:this.form.name,
                        tagDescribe:this.form.desc,
                        tagStart:this.form.radio
                }).then((res)=>{
                    // console.log(res)

                    this.$message({
                        message: '添加成功！',
                        type: 'success'
                    });
                    this.getAllMess();
                })
                // this.$axios.post('/api/tag/add',JSON.stringify({
                //     tagName:this.name,
                //         tagDescribe:this.desc,
                //       tagStart:this.radio
                // })).then((res)=>{
                //     console.log(this.name)
                //     console.log(res)
                // })
                // this.$axios({
                //     url:'/api/tag/add',
                //     method:'post',
                //     data:{
                //         tagName:this.name,
                //             tagDescribe:this.desc,
                //             tagStart:this.radio
                //     }
                // }).then((res)=>{
                //     console.log(res)
                // })
                // this.$axios.post('/api/tag/add',qs.stringify({
                //     tagName:this.name,
                //     tagDescribe:this.desc,
                //     tagStart:this.radio
                // }),{
                //     headers:{
                //         'Content-Type':'application/x-www-form-urlencoded'
                //     }
                // }).then((res)=>{
                //     console.log(res)
                //     console.log(this.name)
                // })




            },


               //最终修改
            mixSure(){
                this.dialogFormVisible2=false
                this.$axios.post('/api/tag/edit?tagId='+this.form.id+"&tagName="+this.form.name
                    +"&tagDescribe="+this.form.desc+"&tagStart="+this.form.radio,{
                    // tagName=321&tagDescribe=321&tagStart=0
                    // update/one?commentId='+data.commentId+"&commentStatus="+data.commentStatus)                     // tagName:this.form.name,
                     // tagDescribe:this.form.desc,
                     // tagStart:this.form.radio
                }).then((res)=>{
                    // console.log(res.data)
                    this.$message({
                        message: '修改成功！',
                        type: 'success'
                    });
                    this.getAllMess();
                })
            },


            //修改
           mix(id){
               this.dialogFormVisible2=true
               // console.log(id)

               this.form.id=id

               this.$axios.post('/api/tag/findEditTag?tagId='+id,{

               }).then((res)=>{
                   // console.log(res.data.data)
                   this.form.name=res.data.data.tagName
                   this.form.desc=res.data.data.tagDescribe
                   // this.form.radio=res.data.data.tagStart
                   this.form.radio=parseInt(res.data.data.tagStart)
               })
           },



           //删除
           del(id){
               var arr=[];
               arr.push(id);
               this.$confirm('此操作将永久删除该文件, 是否继续?', '提示',{
                   confirmButtonText: '确定',
                   cancelButtonText: '取消',
                   type: 'warning'
               }). then(() =>{
                   this.$axios.post('/api/tag/delete',[...arr]).then((res)=>{
                       // console.log(res.data)
                       this.getAllMess();
                   })
                   this.$message({
                       type:'success',
                       message: '删除成功!'
                   });
               }).catch(()=>{
                   this.$message({
                       type:'info',
                       message:'已取消删除!'
                   });
               });
           },



            //得到数据显示
            getAllMess(){
                this.$axios.post('/api/tag/list').then((res)=>{
                    // console.log(res.data.data)
                    this.tableData=res.data.data;
                })
            },

        },
        data() {
            return {
                tableData: [

                ],
                dialogFormVisible2:false,
                dialogFormVisible: false,
                form: {
                    desc:'',
                    radio:1,
                    name:'',
                    // jianjie:'',
                    id:'',

                },
                formLabelWidth: '120px'

            }
        },



        created() {
            this.getAllMess();
        }
    }
</script>

<style scoped>
    .headname{
        text-align: left;
        font-size: 18px;
    }
    .btn{
        text-align: left;
        margin-top: 5px;
    }
    .fenleiname{
        text-align: left;
    }
    .radioleft{
        text-align: left;
    }
    .frommenu{
        overflow: hidden;
    }
    /deep/ .el-input{
        width: 50%;
        float: left;
    }
    /deep/ .el-textarea__inner{
        width: 58%;
        margin-left: 39px;
        /*margin-bottom: -50px;*/
    }
</style>